<!-- 使用页面滚动示例(无需设置z-paging的高度) -->
<template>
  <view class="content">
  
    <z-paging ref="paging" fixed @query="getDataList" v-model="articleList">
      <!-- 活动海报 -->
      <swiper class="activity" autoplay :interval="3000" circular>
        <swiper-item v-for="(item,i) in activityList" :key="i">
          <view class="activityBanner" @click="navTo(item.link)">
            <image :src="item.img" mode="aspectFill"></image>
          </view>
        </swiper-item>
      </swiper>
	  
	  <tabs-view @change="tabChange" :items="['关注','推荐','热门','圈子']"></tabs-view>
	  
      <!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
      <!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
      <view>
        <!-- 关注 -->
        <block v-if="currentActive==0">
          <view class="my_pet" v-if="isLogin">
            <!-- 我的关注 -->
            <view class="my_pet_box my_pet_box1" v-if="followedList.length != 0">
              <view class="my_pet_box_top">
                <view class="my_pet_box_top_title">
                  <image class="minImage" src="/static/decorate.png" mode="widthFix"></image>
                  <h1>我的关注</h1>
                </view>
                <text @click="navTo('/subpkg/attentionlist/attentionlist')">查看全部</text>
              </view>
              <scroll-view scroll-x class="my_pet_box_bottom white-space">
                <view class="my_img_box" v-for="(item,i) in followedList" :key="i"
                  @click="navTo('/subpkg/userInfo/userInfo?id=' + item.id)">
                  <image class="minImage" :src="item.avatar" mode="widthFix"></image>
                  <text class="minText">{{item.name}}</text>
                </view>
              </scroll-view>
            </view>
            <view class="no_Pet_record" v-if="followedList.length == 0">
              <image src="/static/images/mine/nopey.png" mode="widthFix"></image>
              <view class="no_Pet_record_text">
                你还没有关注用户，快去关注吧 ~
              </view>
            </view>
          </view>
          <view class="no_Pet_record" v-if="!isLogin">
            <image src="/static/images/mine/nopey.png" mode="widthFix"></image>
            <view class="no_Pet_record_text">
              你还没有登录，快去登录吧 ~
            </view>
          </view>
        </block>
        <!-- 推荐 -->
        <block v-if="currentActive==1">
          <view class="no_Pet_record" v-if="articleList.length == 0">
            <image class="minImage" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
            <view class="no_Pet_record_text">
              数据加载中，请稍等片刻...
            </view>
          </view>
        </block>
        <!-- 热门 -->
        <block v-if="currentActive==2">
          <view class="no_Pet_record" v-if="articleList.length == 0">
            <image class="minImage" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
            <view class="no_Pet_record_text">
              数据加载中，请稍等片刻...
            </view>
          </view>
        </block>
        <!-- 圈子 -->
        <block v-if="currentActive==3">
          <view class="my_pet">
            <!-- 我的圈子 -->
            <view class="my_pet_box">
              <view class="my_pet_box_top">
                <view class="my_pet_box_top_title" @click="navTo('/subpkg/thecircle/thecircle')">
                  <image class="minImage" src="/static/decoratetype.png" mode="widthFix"></image>
                  <h1>我的圈子</h1>
                </view>
                <text @click="navTo('/subpkg/thecircle/thecircle')">查看全部</text>
              </view>
              <scroll-view scroll-x class="my_pet_box_bottom white-space">
                <view class="my_img_box" @click="navTo('/subpkg/thecircle/thecircle')">
                  <view class="my_img_box_img">
                    <image class="maxImage" src="/static/circle.png" mode="widthFix"></image>
                  </view>
                  <text class="minText">圈子广场</text>
                </view>
                <view class="my_img_box" @click="navTo('/subpkg/petInfo/petInfo?id=' + item.id)"
                  v-for="(item,i) in circleRanking.categoryList" :key="i">
                  <image class="minImage1" :src="item.previewImage" mode="aspectFill"></image>
                  <text class="minText">{{item.categoryName}}</text>
                </view>
              </scroll-view>
            </view>
            <!-- 推荐 -->
            <view class="my_pet_box" v-if="circleRanking.recommendList">
              <view class="my_pet_box_top">
                <view class="my_pet_box_top_title" @click="navTo('/subpkg/thecircle/thecircle')">
                  <image class="minImage" src="/static/decoratetype.png" mode="widthFix"></image>
                  <h1>热门圈子</h1>
                </view>
              </view>
              <view class="my_pet_box_bottom">
                <block v-for="(item,i) in circleRanking.recommendList" :key="i">
                  <view class="my_pet_box_bottom_box" @click="navTo('/subpkg/petInfo/petInfo?id=' + item.id)">
                    <view class="my_pet_box_bottom_box_img">
                      <image :src="item.previewImage" mode="aspectFill"></image>
                    </view>
                    <view class="my_pet_box_bottom_box_title">
                      <h1>{{item.categoryName}}</h1>
                      <text>{{item.joiners}}人加入</text>
                    </view>
                    <view class="minImage">
                      <image src="/static/fiery.png" mode="aspectFill"></image>
                    </view>
                  </view>
                </block>
              </view>
            </view>
            <!-- 热门活动 -->
            <view class="my_pet_box">
              <view class="my_pet_box_top">
                <view class="my_pet_box_top_title" @click="navTo('/subpkg/thecircle/thecircle')">
                  <image class="minImage" src="/static/decoratetype.png" mode="widthFix"></image>
                  <h1>热门活动</h1>
                </view>
                <text @click="allactivityListClick">所有活动</text>
              </view>
              <block v-for="(item,i) in circleRanking.activityList" :key="i">
                <userActivity :activityItem="item" :shadowShow="true"></userActivity>
              </block>
            </view>
            <!-- 宠物排行 -->
            <view class="my_pet_box" v-if="circleRanking.productRankingList">
              <view class="my_pet_box_top">
                <view class="my_pet_box_top_title">
                  <image class="minImage" src="/static/decoratetype.png" mode="widthFix"></image>
                  <h1>想买宠物排行</h1>
                </view>
                <text @click="oncircles">查看全部</text>
              </view>
              <!--  -->
              <view class="my_pet_box_top_box">
                <block v-for="(item,i) in circleRanking.productRankingList" :key="i">
                  <petRanking :backShow="false" :rankingItem="item"></petRanking>
                </block>
              </view>
            </view>
            <!-- 精选 -->
            <view class="choiceness">
              <h1 class="choiceness_title">精选</h1>
              <view class="no_Pet_record" v-if="articleList.length == 0">
                <image class="minImage" src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/59156162f3ceb0cd81ba5c50a6c38dd5.png" mode="aspectFill"></image>
                <view class="no_Pet_record_text">
                  数据加载中，请稍等片刻...
                </view>
              </view>
            </view>
          </view>
        </block>
        <view class="my_pet" v-for="(item,index) in articleList" :key="index">
          <view class="my_pet_user paddingleft">
            <!-- 组件 -->
            <userIntroduced :conditionItem="item" @onfollowed="onfollowed" @onlikeShow="onlikeShow"
              @onremoveShow="onremoveShow"></userIntroduced>
          </view>
        </view>
      </view>
    </z-paging>
    <!-- 宠物排行 -->
    <van-popup @touchmove.stop="touchMove" :show="rankingShow" round closeable close-icon-position="top-left"
      position="bottom" custom-style="height: 80%" @close="onrankingClose">
      <view class="informshow_return1">
        <h1>想买宠物排行榜</h1>
      </view>
      <view class="informshow_tab">
        <van-tabs :active="rankingactive" @change="onChangerankingactive">
          <van-tab title="全部">
            <view class="informshow_tab_title">
              共 <text style="color: #000000;margin: 0 15rpx;">{{cateLevel2.length}}</text> 只萌宠
            </view>
            <view style="padding-top: 16rpx;">
              <scroll-view style="height: 800rpx;" scroll-y="true">
                <block v-for="(item,i) in cateLevel2" :key="i">
                  <petRanking :rankingItem="item"></petRanking>
                </block>
              </scroll-view>
            </view>
          </van-tab>
          <van-tab :title="item.title" v-for="(item,i) in animalList" :key="i">
            <view class="informshow_tab_title">
              共 <text style="color: #000000;margin: 0 15rpx;">{{cateLevel2.length}}</text> 只萌宠
            </view>
            <view style="padding-top: 16rpx;">
              <scroll-view style="height: 800rpx;" scroll-y="true">
                <block v-for="(item1,i1) in cateLevel2" :key="i1">
                  <petRanking :rankingItem="item1"></petRanking>
                </block>
              </scroll-view>
            </view>
          </van-tab>
        </van-tabs>
      </view>
    </van-popup>

    <!-- 悬浮 -->
    <userSuspension :remarkShow="false"></userSuspension>
  </view>
</template>

<script>
  import {
    mapActions,
    mapGetters,
    mapMutations
  } from 'vuex'
  import {
    getrecommend,
    getarticle,
    getcircleList,
    getattention,
    getcircleessence,
    getattentionrecommend,
    getattentionList
  } from '@/api/community.js'
  import {
    homepartidetail
  } from '@/api/activity.js'
  import {
    getheatseniority
  } from '@/api/circle.js'
  import userIntroduced from '@/components/user_introduced/user_introduced.vue'
  import petRanking from '@/components/pet_ranking/pet_ranking.vue'
  import userActivity from "@/components/user_activity/user_activity.vue"
  import userSuspension from "@/components/user_suspension/user_suspension.vue"
  //使用页面滚动时引入此mixin，用于监听和处理onPullDownRefresh等页面生命周期方法(如果全局引入了，就不要这一步，全局引入示例见main.js)
  // import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
  export default {
  	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
  	// mixins: [ZPagingMixin],
    components: {
      userIntroduced,
      petRanking,
      userActivity,
      userSuspension
    },
    data() {
      return {
        //关注
        followedList: [],
        // 圈子排行
        circleRanking: [],
        //所有数据的集合
        articleList: [],
        rankingactive: 0,
        // 更多弹框
        concealshow: false,
        // 举报
        informshow: false,
        // 取消关注
        longinshow: false,
        // 宠物排行
        rankingShow: false,
        // 宠物排行tab
        animalList: [],
        // 宠物排行数据
        cateLevel2: [],
        current: 1,
        size: 10,
        total: 0,
        articleShow: true,
        currentActive: 1,

        // 活动列表
        activityList: [],
      };
    },
    computed: {
      ...mapGetters('m_user', ['isLogin', 'currentStoreId'])
    },
    watch: {
      isLogin: {
        handler: function(newV, oldV) {
          if (newV == true) {
            if (this.current = 0) {
              //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
              this.$refs.paging.reload();
            }
          }
        },
        deep: true
      }
    },
    onLoad() {
      let app = getApp();
      app.globalData.animalList.forEach(x => {
        x.categoryType.forEach(item => {
          if (item == 0) {
            this.animalList.push(x)
          }
        })
      })
      homepartidetail(0, this.currentStoreId).then(res => {
        console.log(res)
        this.activityList = res.data
      })
    },
    methods: {
      onfollowed(res, type) {
        this.articleList.forEach((item) => {
          if (item.createUser === res.createUser) {
            item.followed = !res.followed;
          }
        });
      },
      onlikeShow(res, type) {
        this.articleList.forEach((item) => {
          if (item.id === res.id) {
            item.isLiked = !res.isLiked
            if (item.isLiked) {
              item.likes += 1
            } else {
              if (item.likes > 0) {
                item.likes -= 1
              }
            }
          }
        });
      },
      getcommunity() {
        this.Getarticle()
      },
      tabChange(index) {
        this.currentActive = index;
        //当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
        this.$refs.paging.reload();
      },
      onChangerankingactive(e) {
        if (e.detail.index == 0) {
          getheatseniority().then(res => {
            // console.log(res)
            this.cateLevel2 = res.data
          })
        } else {
          getheatseniority(this.animalList[e.detail.index - 1].id).then(res => {
            // console.log(res)
            this.cateLevel2 = res.data
          })
        }
      },
      getDataList(pageNo, pageSize) {
        let that = this;
        if (this.currentActive == 0) {
          // 获取关注
          if (this.isLogin) {
            // 获取关注列表
            getattentionList().then(res => {
              // console.log(res)
              that.followedList = res.data;
            })
            // 获取关注的内容
            getattentionrecommend({
              current: pageNo,
              size: pageSize
            }).then(res => {
              // console.log(res)
              res.data.records.forEach(item => {
                if (item.sliderImgs) {
                  item.sliderImgs = item.sliderImgs.split(',')
                }
              })
              that.$refs.paging.complete(res.data.records);
            })
          }
        } else if (this.currentActive == 1) { // 获取推荐
          getrecommend({
            current: pageNo,
            size: pageSize
          }).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            that.$refs.paging.complete(res.data.records);
          })
        } else if (this.currentActive == 2) { // 获取热门
          getarticle({
            current: pageNo,
            size: pageSize
          }).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            that.$refs.paging.complete(res.data.records);
          })
        } else if (this.currentActive == 3) { //获取圈子精华
          getcircleList(this.currentStoreId).then(res => {
            res.data.activityList.forEach(item => {
              item.validDate = item.validDate.split(',')
              // 时间剩余
              var time = item.validDate[1]
              var repTime = time.replace(/-/g, '/');
              var timeTamp = Date.parse(repTime);
              item.validDate[1] = timeTamp - new Date().getTime()
            })
            that.circleRanking = res.data
          })
          getcircleessence({
            current: pageNo,
            size: pageSize,
            articleType: -1
          }).then(res => {
            res.data.records.forEach(item => {
              if (item.sliderImgs) {
                item.sliderImgs = item.sliderImgs.split(',')
              }
            })
            that.$refs.paging.complete(res.data.records);
          })
        }
      },
      // 跳转
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      onrankingClose() {
        this.rankingShow = false
      },
      // 获取排行列表
      oncircles() {
        this.rankingShow = true
        getheatseniority().then(res => {
          // console.log(res)
          this.cateLevel2 = res.data
        })
      },
      touchMove(e) {
        // #ifdef APP-NVUE
        e.stopPropagation()
        // #endif
      },
      onremoveShow(ids) {
        const index = this.articleList.findIndex(item => item.id == ids)
        this.articleList.splice(index, 1)
      },
      allactivityListClick() {
        uni.report('ClickonallActivities', '点击所有活动');
        this.navTo('/subpkg/allactivity/allactivity')
      }
    }
  }
</script>

<style lang='scss'>
  /deep/.uni-scroll-view ::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }

  /deep/::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }


  /deep/ .zp-page-scroll-top {
    top: 0rpx !important;
    position: absolute !important;
    border-bottom: 2rpx solid #f1f1f1;
    padding: 15rpx 0 20rpx !important;
  }

  /deep/ .currentIndex {
    font-size: 36rpx !important;
  }

  .item {
    z-index: 1;
    position: relative;
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0rpx 30rpx;
  }

  .container {
    padding-bottom: 36rpx;
    /* border-bottom: 1px solid rgba(247, 247, 247, 1); */
  }

  /deep/ .zp-main-image,
  .data-v-a664708e {
    margin-top: 0rpx !important;
  }

  /deep/ .segment-item {
    width: 18% !important;
  }
  
  /deep/ .zp-page-scroll-top {
    z-index: 20 !important;
  }


  /deep/ .tui-modal-btn,
  .data-v-d285c6d4 {
    font-size: 34rpx !important;
  }


  /deep/ .van-cell {
    align-items: center;

    /deep/ .van-cell__title {
      font-size: 34rpx;
      line-height: 64rpx;
    }
  }

  .no_Pet_record {
    display: flex;
    height: 1050rpx;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 120rpx;
      height: 181rpx;
    }

    .minImage {
      width: 262rpx;
      height: 258rpx;
    }

    .no_Pet_record_text {
      width: 360rpx;
      height: 112rpx;
      font-size: 30rpx;
      text-align: center;
      color: rgba(197, 197, 197, 0.9);
      line-height: 60rpx;
      margin-top: 20rpx;
    }
  }

  .my_pet {
    padding: 0rpx 24rpx 15rpx;

    .my_pet_box1 {
      padding: 27rpx 38rpx 41rpx;
      border-radius: 20rpx;
      box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
    }

    .my_pet_box {
      margin-top: 50rpx;
      box-sizing: border-box;

      .my_pet_box_top {
        display: flex;
        justify-content: space-between;

        .my_pet_box_top_title {
          display: flex;
          align-items: center;

          .minImage {
            width: 34rpx;
            height: 34rpx;
            margin-right: 20rpx;
            margin-top: 8rpx;
          }

          h1 {
            font-size: 36rpx;
            color: rgba(61, 61, 61, 1);
          }
        }

        text {
          color: rgba(61, 61, 61, 0.5);
          font-size: 30rpx;
        }
      }

      .white-space {
        white-space: nowrap;
      }

      .my_pet_box_bottom {
        display: flex;
        padding-bottom: 10rpx;

        /* 我的圈子 */
        .my_img_box {
          // float: left;
          margin-top: 35rpx;
          margin-right: 36rpx;
          // width: 112rpx;
          display: inline-flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          vertical-align: top;

          .minImage {
            width: 118rpx;
            height: 118rpx;
            border-radius: 50%;
          }

          .minImage1 {
            width: 118rpx;
            height: 118rpx;
            border-radius: 10rpx;
          }

          .my_img_box_img {
            width: 118rpx;
            height: 118rpx;
            border: 1px solid rgba(61, 61, 61, 0.1);
            border-radius: 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 1rpx;

            .maxImage {
              width: 40rpx;
              height: 40rpx;
            }
          }

          .minText {
            font-size: 26rpx;
            margin-top: 18rpx;
          }
        }

        .my_img_box:last-child {
          margin-right: 0 !important;
        }

        /* 推荐 */
        .my_pet_box_bottom_box:last-child {
          margin-right: 0;
        }

        .my_pet_box_bottom_box {
          position: relative;
          width: 50%;
          height: 158rpx;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
          border-radius: 15rpx;
          margin-top: 32rpx;
          margin-right: 25rpx;
          padding: 29rpx 31rpx;
          display: flex;
          /* justify-content: space-between; */
          align-items: center;
          box-sizing: border-box;

          .my_pet_box_bottom_box_img {
            margin-right: 24rpx;

            image {
              width: 100rpx;
              height: 100rpx;
              border-radius: 10rpx;
            }
          }

          .my_pet_box_bottom_box_title {
            h1 {
              color: rgba(61, 61, 61, 1);
              font-size: 26rpx;
            }

            text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 24rpx;
            }
          }

          .minImage {
            position: absolute;
            right: 0;
            top: 0;
            width: 36rpx;
            height: 34rpx;
            background-color: rgba(255, 87, 51, 1);
            border-top-left-radius: 0rpx;
            border-top-right-radius: 15rpx;
            border-bottom-right-radius: 0rpx;
            border-bottom-left-radius: 15rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 15rpx;
              height: 19.2rpx;
            }
          }
        }
      }

      .my_pet_box_top_box {
        padding: 0 24rpx;
        box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);
        border-radius: 20rpx;
        margin-top: 35rpx;
      }
    }

    // 精选
    .choiceness {
      margin-top: 45rpx;

      .choiceness_title {
        color: rgba(61, 61, 61, 1);
        font-size: 36rpx;
      }

      .choiceness_box {
        // margin-top: 38rpx;
        // padding: 0 24rpx;
      }
    }

    .my_pet_user {
      // margin-top: 43rpx;
      // padding-bottom: 35rpx;

      .my_pet_user_box {
        height: 74rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .my_pet_user_box_left {
          display: flex;

          .image {
            height: 74rpx;
            width: 74rpx;
            border-radius: 50%;
          }

          .my_pet_user_title {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 18rpx;
            height: 74rpx;

            h1 {
              color: rgba(61, 61, 61, 1);
              font-size: 30rpx;
            }

            text {
              color: rgba(61, 61, 61, 0.5);
              font-size: 24rpx;
            }
          }
        }

        .my_pet_user_box_right {

        }
      }

    }
  }

  .informshow_float {
    position: absolute;
    top: 60rpx;
    left: 45rpx;
  }

  .informshow_return {
    text-align: center;
    padding: 53rpx 45rpx;
    font-size: 40rpx;
    // align-items: center;
    // justify-content: center;
    border-bottom: 1px solid rgba(241, 241, 241, 1);
  }

  .informshow_return1 {
    text-align: center;
    padding: 30rpx 45rpx;
    font-size: 40rpx;
    // align-items: center;
    // justify-content: center;
    // border-bottom: 1px solid rgba(241, 241, 241, 1);
  }

  .informshow_tab {
    /deep/ .van-tab {
      flex: none !important;
      -webkit-flex: none !important;
      padding: 0 35rpx !important;
      background-color: rgba(61, 61, 61, 0.05);
      // width: 128rpx;
      height: 52rpx;
      margin-right: 32rpx;
    }

    /deep/ .van-tabs__nav {
      padding: 20rpx 24rpx !important;
    }

    /deep/ .van-ellipsis {

      color: rgba(51, 51, 51, 1);
      font-size: 26rpx;
      line-height: 52rpx;
      border-radius: 26.5rpx;
    }

    /deep/ .van-tabs__line {
      display: none;
    }

    /deep/ .van-tab--active {
      font-size: 36rpx !important;
      font-weight: bold !important;
      background-color: rgba(253, 211, 56, 1) !important;
      border-radius: 26.5rpx;
    }

    .informshow_tab_title {
      margin-top: 25rpx;
      padding: 0 24rpx;
      color: rgba(61, 61, 61, 0.5);
      font-size: 24rpx;
    }
  }

  .activity {
    margin-top: 30rpx;
    height: 345rpx;
    padding-bottom: 10rpx;
  }

  // 活动海报
  .activityBanner {
    padding: 0 24rpx;
    /* overflow: hidden; */
    height: 100%;

    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }
</style>
